<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: transparent;
    }

    .modal-content {
      background-color: #fff;
      margin: auto;
      width: 20%;
      height: 10%;
    }

    .close {
      color:#aaa;
      float:right;
      font-size:28px;
    }
  </style>
</head>
<body>

<button id="myBtn">点击这里</button>

<section id="myModal" class="modal">

  <article class="modal-content">
    <span class="close">&times;</span>
    <input name="username" type="text" placeholder="请输入用户名">
  </article>

</section>

<script>
  var modal = document.getElementById("myModal");
  var btn = document.getElementById("myBtn");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }

  span.onclick = function() {
    modal.style.display = "none";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

</body>
</html>
